<template>
  <div class="min-h-screen bg-black">
    <div class="pt-20"></div>
    <div class="container mx-auto px-4 py-4">
      <div class="bg-black rounded-xl overflow-hidden shadow-lg border border-gray-800 relative">
        <div class="absolute top-3 left-3 z-10">
          <el-button size="small" circle :icon="ArrowLeft" @click="goBack" />
        </div>
        <video 
          ref="videoRef"
          class="w-full h-auto"
          controls
          :src="videoSrc"
        >
        </video>
      </div>

      <div class="mt-4 flex items-center justify-between text-gray-300">
        <div>
          <div class="text-lg font-semibold">{{ title }}</div>
          <div class="text-xs opacity-70">免费体验 · 预览小节</div>
        </div>
        <div class="flex items-center gap-2">
          <el-button size="small" @click="backToSeries">返回目录</el-button>
          <el-button type="primary" size="small" @click="goBuy">购买完整课程</el-button>
        </div>
      </div>

      <!-- 选集网格（类似B站格子） -->
      <div class="mt-4">
        <div class="text-gray-300 text-sm mb-2">选集（第 1 集免费预览）</div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
          <div
            v-for="(lesson, index) in lessons"
            :key="lesson.id"
            class="rounded-lg border bg-gray-900 border-gray-800 p-3 cursor-pointer hover:border-blue-500 transition-colors"
            :class="{ 'border-blue-500 ring-1 ring-blue-500': isActive(lesson) }"
            @click="onLessonClick(lesson, index)"
          >
            <div class="flex items-center justify-between mb-2">
              <span class="text-xs text-gray-400">第 {{ index + 1 }} 集</span>
              <span v-if="index === 0" class="text-[10px] px-1.5 py-0.5 rounded bg-green-500/20 text-green-300">免费</span>
            </div>
            <div class="text-gray-200 text-xs font-medium line-clamp-2 leading-5 min-h-[2.5rem]">
              {{ lesson.title }}
            </div>
            <div class="mt-2 text-[11px] text-gray-500">{{ lesson.duration }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const courseId = computed(() => route.params.courseId)
const lessonId = computed(() => route.params.lessonId)

const videoRef = ref(null)

const videoSrc = computed(() => {
  // 简单映射预览视频，满足“装个视频源就好”
  return 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'
})

const title = computed(() => `课程 ${courseId.value} - 预览 ${lessonId.value}`)

const backToSeries = () => {
  router.push({ path: `/courses/${courseId.value}/series`, query: { type: 'series' } })
}

const goBuy = () => {
  ElMessage.info('购买入口暂未开通，示例预览可正常观看')
}

// 选集数据（与系列页保持一致，第一集可预览）
const lessons = ref([
  { id: 'l1', title: '第1节：课程导学（免费体验）', duration: '12:35', preview: true, videoUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4' },
  { id: 'l2', title: '第2节：核心概念与环境配置', duration: '18:20', preview: false },
  { id: 'l3', title: '第3节：基础实战练习', duration: '22:10', preview: false },
  { id: 'l4', title: '第4节：项目结构与工程化', duration: '19:45', preview: false },
  { id: 'l5', title: '第5节：模块化与复用', duration: '21:12', preview: false },
  { id: 'l6', title: '第6节：综合案例串讲', duration: '24:08', preview: false }
])

const isActive = (lesson) => lesson.id === lessonId.value

const onLessonClick = (lesson, index) => {
  if (lesson.preview) {
    router.push(`/courses/${courseId.value}/preview/${lesson.id}`)
    return
  }
  ElMessage.warning('该小节为付费内容，请购买后观看')
}

onMounted(() => {
  // 自动播放（若浏览器允许）
  const v = videoRef.value
  if (v && v.play) {
    v.play().catch(() => {})
  }
})

const goBack = () => {
  if (window.history.length > 1) {
    router.back()
    return
  }
  backToSeries()
}
</script>

<style scoped>
</style>



